<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>分配权限</title>
    <link rel="stylesheet" th:href="@{/webjars/ztree/3.5.0/css/zTreeStyle/zTreeStyle.css}" type="text/css" />

</head>
<body style="position:relative;">
<div th:replace="/layout/css :: #css"></div>

<div class="container-fluid">
    <form id="assignForm" method="post" class="form-inline modal-form">

        <div class="form-group">
            <label for="systemId" class="col-sm-3 control-label">系统</label>
            <select id="systemId" name="systemId" class="form-control" onchange="loadMenu();">
                <option value="0">请选择系统</option>
                <option th:each="system,systemStat : ${systemList}" th:value="${system.id}" th:text="${system.title}"></option>
            </select>
        </div>
        <div class="form-group">
            <label for="menu" class="col-sm-3 control-label">菜单</label>
            <div class="input-group">
                <input id="menu" name="menu" type="text" class="form-control" readonly="readonly" />
                <a id="menuBtn" href="#" class="input-group-addon" onclick="showMenu(); return false;">选择</a>
                <a  href="#" class="input-group-addon" onclick="clearMenu(); return false;">清空</a>
            </div>
        </div>

        <input id="menuId" name="menuId" th:type="hidden" />
        <input id="id" name="id" th:type="hidden" th:value="${id}" />
        <div class="box box-primary">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
                <h3 class="box-title">选择权限</h3>
            </div>
            <div class="box-body" id="permissionBox">

            </div>
            <div class="box-footer clearfix no-border">
                <button type="button" class="btn btn-primary btn-block" onclick="doAssign()">保 存</button>
            </div>
        </div>
    </form>

    <div id="menuContent" class="menuContent">
        <ul id="treeMenu" class="ztree" style="margin-top:0; width:250px;"></ul>
    </div>

</div>

<div th:replace="/layout/js :: #js"></div>
<script type="text/javascript" th:src="@{/js/modalPage.js}"></script>
<script type="text/javascript" th:src="@{/webjars/ztree/3.5.0/js/jquery.ztree.core-3.5.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/ztree/3.5.0/js/jquery.ztree.excheck-3.5.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/ztree/3.5.0/js/jquery.ztree.exedit-3.5.min.js}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    var treeSetting = {
        view: {
            dblClickExpand: false
        },
        callback: {
            onClick: onClick
        },
        data: {
            key: {
                url: "xUrl"
            }
        }
    };


    /**
     * 点击菜单，加载权限
     * */
    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeMenu");
        var nodes = zTree.getSelectedNodes();
        var node = nodes[0];

        $("#menu").val(node.name);
        $("#menuId").val(node.id);
        loadPermmissions();
    }

    /**
     * 加载权限
     * */
    function loadPermmissions(){
        var systemId = $("#systemId").val();
        $("#permissionBox").html("");
        if(systemId == 0){
            chooseConfirm("请选择系统");
            return;
        }

        var menuId = $("#menuId").val();
        if(!menuId){
            menuId = 0;
        }

        $.ajax({
            type: 'post',
            url: '/permission/getPermissions/' + systemId + "/" + menuId,
            success: function(result) {
                if (result.status != 0) {
                    failHandler(result);
                } else {
                    debugger;
                    var permissions = result.data;
                    for(var i =0;i < permissions.length;i++){
                        var checkbox = '<label class="dispersion" data-toggle="tooltip" data-placement="bottom" title="' + permissions[i].name + '"><input type="checkbox" name="permission" value="' + permissions[i].id + '" ';
                        if(isContains(permissions[i])){
                            checkbox += ' checked="checked" ';
                        }
                        checkbox = checkbox + '/>' + permissions[i].name + '</label>';

                        $("#permissionBox").append(checkbox);
                    }


                }
            },
            error: errorHandler
        });
    }

    function isContains(permission){
        var permissions = [[${permissions}]];
        if(!permissions || permissions.length <= 0){
            return false;
        }

        for(var i = 0;i < permissions.length;i++){
            var id = permissions[i].id;
            if(id == permission.id){
                return true;
            }
        }
        return false;
    }
    /**
     * 隐藏菜单
     * */
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    /**
     * 隐藏菜单
     * */
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }

    /**
     * 展示蔡安
     * */
    function showMenu(){
        var systemId = $("#systemId").val();
        if(systemId == 0){
            chooseConfirm("请选择系统");
            return;
        }

        var menuObj = $("#menu");
        var menuOffset = $("#menu").offset();
        $("#menuContent").css({left:menuOffset.left + "px", top:menuOffset.top + menuObj.outerHeight() + "px"}).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);

    }

    /**
     * 清空菜单，重新加载权限
     * */
    function clearMenu(){
        if($("#menuId").val() == 0){
            return;
        }
        $("#menu").val("");
        $("#menuId").val(0);
        loadPermmissions();
    }

    /**
     * 加载菜单和权限
     * */
    function loadMenu(){

        var systemId = $("#systemId").val();
        //清空权限和菜单
        $("#permissionBox").html("");
        $("#treeMenu").html("");
        if(systemId == 0){
            chooseConfirm("请选择系统");
            return;
        }

        $.ajax({
            type: 'post',
            url: '/menu/getTreeMenu/' + systemId,
            success: function(result) {
                if (result.status != 0) {
                    failHandler(result);
                } else {
                    debugger;
                    var zNodes = result.data;
                    $.fn.zTree.init($("#treeMenu"), treeSetting, zNodes);

                    loadPermmissions();
                }
            },
            error: errorHandler
        });
    }

    /**
     * 执行分配权限
     * */
    function doAssign(){
        var systemId = $("#systemId").val();

        if(systemId == 0){
            chooseConfirm("请选择系统");
            return;
        }
        var url = [[${commitUrl}]];
        //初始化选中的内容
        $.ajax({
            type: 'post',
            url: url,
            data: $('#assignForm').serialize(),
            success: function(result) {
                if (result.status != 0) {
                    failHandler(result);
                } else {
                    successConfirm();
                    closeModalNotRefresh();
                }
            },
            error: errorHandler
        });
    }
    /*]]>*/
</script>
</body>
</html>